<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reubah</title>
    <link href="/static/css/styles.css" rel="stylesheet">
    <script src="/static/js/main.js" defer></script>
</head>
<body class="transition-colors duration-200" x-data="{ activeTab: 'image', processingMode: 'individual', darkMode: localStorage.getItem('darkMode') === 'true' }" 
    :class="{ 'dark bg-darkBg text-gray-100': darkMode, 'bg-[#FFFFFF] text-gray-900': !darkMode }">
    {{ template "nav" . }}

    <main class="min-h-screen py-6">
        <div class="max-w-6xl mx-auto px-4">
            <div class="mb-6 rounded-lg shadow" :class="{ 'bg-darkSurface text-darkTextPrimary': darkMode, 'bg-white': !darkMode }">
                {{ template "tabs" . }}

                <div class="p-6">
                    <div x-show="activeTab === 'image'" 
                         x-transition:enter="transition ease-out duration-300"
                         x-transition:enter-start="opacity-0 transform scale-95"
                         x-transition:enter-end="opacity-100 transform scale-100"
                         class="space-y-6">
                        {{ template "page-image" . }}
                    </div>

                    <div x-show="activeTab === 'document'" 
                         x-transition:enter="transition ease-out duration-300"
                         x-transition:enter-start="opacity-0 transform scale-95"
                         x-transition:enter-end="opacity-100 transform scale-100"
                         class="space-y-6">
                        {{ template "page-document" . }}
                    </div>

                    <div x-show="activeTab === 'batch'" 
                         x-transition:enter="transition ease-out duration-300"
                         x-transition:enter-start="opacity-0 transform scale-95"
                         x-transition:enter-end="opacity-100 transform scale-100"
                         class="space-y-6">
                        {{ template "page-batch" . }}
                    </div>
                </div>
            </div>

            {{ template "progress-result" . }}
        </div>
    </main>

    <script src="/static/js/imagePreview.js"></script>
    <script src="/static/js/formHandler.js"></script>
    <script src="/static/js/batchHandler.js"></script>
    <script src="/static/js/documentHandler.js"></script>
</body>
</html> 